<template>
  <view
    class="row-center"
    :style="{
      height: buttonheight,
      background: buttonBackground,
      borderRadius: buttonRadius,
    }"
  >
    <image
      v-if="layout === kkButtonLayout.leftIcon"
      :style="{
        marginLeft: buttonTextLeft,
        marginRight: `${iconRight}rpx`,
        width: `${iconWidth}rpx`,
        height: `${iconWidth}rpx`,
      }"
      :src="iconSrc"
    ></image>

    <view
      class="kk-button-text"
      :style="{
        lineHeight: buttonheight,
        color: buttonTextColor,
        fontSize: buttonTextFont,
        paddingLeft:
          layout === kkButtonLayout.normal ||
          layout === kkButtonLayout.rightIcon
            ? buttonTextLeft
            : '0px',
        paddingRight: buttonTextLeft,
      }"
      >{{ text }}</view
    >
    <image
      v-if="layout === kkButtonLayout.rightIcon"
      :style="{
        marginLeft: `${rightIconLeft}rpx`,
        marginRight: `${iconRight}rpx`,
        width: `${iconWidth}rpx`,
        height: `${iconHeight}rpx`,
      }"
      :src="iconSrc"
    ></image>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { kkButtonLayout } from "../enmu";

const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  layout: {
    type: Number,
    default: kkButtonLayout.normal,
  },
  radius: {
    type: Number,
    default: 12,
  },
  height: {
    type: String,
    default: 50,
  },
  background: {
    type: String,
    default: "#126EFE",
  },
  isLineBackground: {
    type: Boolean,
    default: false,
  },
  textColor: {
    type: String,
    default: "#ffffff",
  },
  textFont: {
    type: Number,
    default: 26,
  },
  textLeft: {
    type: Number,
    default: 20,
  },
  rightIconLeft: {
    type: Number,
    default: -12,
  },
  iconSrc: {
    type: String,
    default: "",
  },
  iconWidth: {
    type: Number,
    default: 26,
  },
  iconHeight: {
    type: Number,
    default: 26,
  },
  iconRight: {
    type: Number,
    default: 10,
  },
});

const buttonRadius = computed(() => {
  return `${props.radius}rpx`;
});
const buttonBackground = computed(() => {
  if (props.isLineBackground) {
    return `linear-gradient( 89deg, #3D8EFF 0%, #7835FF 100%)`;
  }
  return `${props.background}`;
});
const buttonheight = computed(() => {
  return `${props.height}rpx`;
});

const buttonTextColor = computed(() => {
  return `${props.textColor}`;
});
const buttonTextFont = computed(() => {
  return `${props.textFont}rpx`;
});
const buttonTextLeft = computed(() => {
  return `${props.textLeft}rpx`;
});
</script>

<style lang="scss" scoped>
.kk-button-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
